<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换</title>
</head>
<body>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        .heads{
            width: 100%;
            height: auto;
        }
        .box{
            width: 100%;
            /* margin: 0 auto; */
        }
        ul{
            width: 100%;
            height: 30px;
            list-style: none;
        }
        ul li{
            height: 30px;
            line-height: 30px;
            text-align: center;
            width: 33.2%;
            height: 30px;
            float: left;
            background-color: wheat;
            cursor: pointer;
        }
        ul li:first-child{
            border-right: 1px solid red;
        }
        ul li:nth-child(2){
            border-right: 1px solid red;
        }
        .content{
            width:100%;
            height: 100%;
            background-color: silver;
        }
        *{
        padding: 0;
        margin: 0;
    }
    .text{
        margin: 0 auto;
        width: 500px;
        height: 320px;
    }
    .img{
        width: 200px;
        height: 200px;
        background: url(../img/nvsheng.png) ;
        background-size: 100%;
        margin-left: 106px;
        border: 1px solid gray;
    }
    .name{
        width: 250px;
        height: 20px;
        border: 1px solid gray;
        float: left;
    }
    .number{
        width: 100px;
        height: 20px;
        border: 1px solid gray;
        float: left;
    }
    .price{
        width: 100px;
        height: 20px;
        border: 1px solid gray;
        float: left;
    }
    .stock{
        width: 100px;
        height: 20px;
        border: 1px solid gray;
        /* margin-left: 30px; */
        float: left;
    }
    .title{
        width: 454px;
        height: 50px;
        border: 1px solid gray;
        margin-top: 46px;
    }
    </style>
     <div class="box">
        <ul>
            <li onclick="getClick(0)">最新商品</li>
            <li onclick="getClick(1)">全部商品</li>
            <li onclick="getClick(2)">用户地址</li>
        </ul>
        <div class="content" id="content">
        </div>
    </div>
<script>
    
        let xmlhttp;
         if(window.XMLHttpRequest){
             xmlhttp = new XMLHttpRequest();
         }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         console.log(xmlhttp)
         function getClick(index){
            let box = document.querySelector(".box")
            let lis = document.querySelectorAll("ul li")
            let cot = document.querySelector(".content")
            if(index == 0){
            cot.innerHTML =""
            xmlhttp.open("GET","http://gaoql.top/newest/getNewest.php");
           xmlhttp.send();
           xmlhttp.onreadystatechange=function(){
           if(xmlhttp.readyState == 4 &&xmlhttp.status==200){
               console.log(xmlhttp.responseText)
               var obj = JSON.parse(xmlhttp.responseText)
               console.log(obj.data)
            //    console.log(cot)
                console.log(index)
            for(i = 0;i<obj.data.length;i++){
            cot.innerHTML += "<div class='text'>"+"<div class='img'>"+"</div>"
            +"<div class='name'>"+"名称："+obj.data[i].name+"</div>"
           +"<div class='number'>" +"数量："+obj.data[i].number+"片"+"</div>"
             +"<div class='price'>"+"价格："+obj.data[i].price+"元"+"</div>"
           +"<div class='stock'>" +"库存："+obj.data[i].stock+"片"+"</div>"
           +"<div class='title'>" +"作用："+obj.data[i].title+"</div>"
             +"</div>"
          } 
       }
  }
}else if(index==1){
         cot.innerHTML =""
          xmlhttp.open("GET","http://gaoql.top/getdata/getdata.php");
           xmlhttp.send();
           xmlhttp.onreadystatechange=function(){
           if(xmlhttp.readyState == 4 &&xmlhttp.status==200){
               console.log(xmlhttp.responseText)
               var obj = JSON.parse(xmlhttp.responseText)
               console.log(obj.data)
            //    console.log(cot)
                console.log(index)
            for(i = 0;i<obj.data.length;i++){
            cot.innerHTML += "<div class='text'>"+"<div class='img'>"+"</div>"
            +"<div class='name'>"+"名称："+obj.data[i].name+"</div>"
           +"<div class='number'>" +"数量："+obj.data[i].number+"片"+"</div>"
             +"<div class='price'>"+"价格："+obj.data[i].price+"元"+"</div>"
           +"<div class='stock'>" +"库存："+obj.data[i].stock+"片"+"</div>"
           +"<div class='title'>" +"作用："+obj.data[i].title+"</div>"
             +"</div>"
          } 
       }
  }
}else{
          cot.innerHTML =""
          xmlhttp.open("GET","    http://gaoql.top/address/getAddress.php");
           xmlhttp.send();
           xmlhttp.onreadystatechange=function(){
           if(xmlhttp.readyState == 4 &&xmlhttp.status==200){
               console.log(xmlhttp.responseText)
               var obj = JSON.parse(xmlhttp.responseText)
               console.log(obj.data)
            //    console.log(cot)
                console.log(index)
            for(i = 0;i<obj.data.length;i++){
            cot.innerHTML +="<p>"+obj.data[i].id+"</p>"+"<br>"+"<p>"+obj.data[i].title+"</p>"+"<br>"+
            "<p>"+obj.data[i].phone+"</p>"+"<br>"+"<p>"+obj.data[i].address+"</p>"
         }
       }
     }
   }
}
</script>
</body>
</html>